<template>
	<div class="k-preview">
		<h2 class="title">{{ data.title }}</h2>
		<p class="desc">{{ data.description }}</p>
		<div class="box">
			<component class="ques-block" v-for="(question, index) in data.children" :key="question.id" :is="getComponentType(question.type)" :question="question" :index="index" :scoreIs="data.scoreIs == 1" />
		</div>
	</div>
</template>
<script setup>
import { defineAsyncComponent } from "vue";
import { doneAnswerData } from "./ques.js";
const RadioQuestion = defineAsyncComponent(() => import("./RadioQuestion.vue"));
const CheckboxQuestion = defineAsyncComponent(() => import("./CheckboxQuestion.vue"));
const FillBlankQuestion = defineAsyncComponent(() => import("./FillBlankQuestion.vue"));
const HorzBlankQuestion = defineAsyncComponent(() => import("./HorzBlankQuestion.vue"));
const MatrixRadioQuestion = defineAsyncComponent(() => import("./MatrixRadioQuestion.vue"));
const MatrixCheckboxQuestion = defineAsyncComponent(() => import("./MatrixCheckboxQuestion.vue"));
const MatrixFillBlankQuestion = defineAsyncComponent(() => import("./MatrixFillBlankQuestion.vue"));
const { data } = defineProps({
	data: Object
});

doneAnswerData(data);

function getComponentType(type) {
	type = type.toUpperCase();
	switch (type) {
		case "CHECKBOX":
			return CheckboxQuestion;
		case "RADIO":
			return RadioQuestion;
		case "HORZBLANK":
			return HorzBlankQuestion;
		case "MATRIXRADIO":
			return MatrixRadioQuestion;
		case "MATRIXCHECKBOX":
			return MatrixCheckboxQuestion;
		case "MATRIXFILLBLANK":
			return MatrixFillBlankQuestion;
		case "FILLBLANK":
			return FillBlankQuestion;
		default:
			return "div";
	}
}

function getData() {
	return data;
}
defineExpose({
	getData
});
</script>
